<template>
  <el-dialog v-if="load" :close-on-click-modal="false" v-model="visible" :modal="isView" :style="{ opacity: isView ? '100' : '0' }" v-bind="$attrs">
    <template #title>
      <div ref="printRef" v-print="{ id, popTitle: title }"><el-button link type="primary">打印</el-button></div>
    </template>

    <div :id="id" class="print"
      :style="{ '--border-color': borderColor, '--color': color, '--font-size': fontSize, '--font-family': fontFamily }">
      <slot />
    </div>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  id: { type: String, required: true }, // 打印id
  title: { type: String, default: '' }, // 打印标题
  borderColor: { type: String, default: '#111' },
  color: { type: String, default: '#111' },
  fontSize: { type: String, default: '16px' },
  fontFamily: { type: String, default: 'monospace' },
})

const load = ref(false)
const visible = ref(false)
const isView = ref(true)

// 弹窗
const open = async () => {
  if (!load.value) {
    load.value = true
    await 1
  }
  visible.value = true
  return nextTick()
}
// 查看
const view = async () => {
  isView.value = true
  await open()
}
// 打印
const printRef = ref()
const print = async () => {
  isView.value = false
  await open()
  printRef?.value.click()
  visible.value = false
}

defineExpose({ view, print })
</script>

<style lang="scss">
.print {
  * {
    border-color: var(--border-color);
    color: var(--color);
    font-size: var(--font-size);
    font-family: var(--font-family);
    box-sizing: border-box;
  }
}
</style>